<template>
  <a-form :model="formState" :label-col="{span: 4}" ref="formRef">
    <a-form-item label="用户名" name="user_name">
      <a-input v-model:value="formState.user_name"/>
    </a-form-item>
    <a-form-item label="密码" name="password">
      <a-input-password v-model:value="formState.password"/>
    </a-form-item>
    <a-form-item label="确认密码" name="confirmPassword">
      <a-input-password v-model:value="formState.confirmPassword"/>
    </a-form-item>
    <a-form-item label="头像" name="avatar" :wrapperCol="{span: 8}">
      <a-upload-dragger
          :style="{
              backgroundImage: `url(${avatarUrl})`,
              backgroundSize: '100%'
            }"
          accept="image/*"
          :showUploadList="false"
          :beforeUpload="avatarChange"
      >
        <p class="ant-upload-drag-icon">
          <PlusOutlined/>
        </p>
        <p class="ant-upload-text">点击或拖拽到此处上传头像</p>
      </a-upload-dragger>
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
import {computed, reactive, ref} from "vue";
import {useUserStore} from "@/stores/user";
import {PlusOutlined} from '@ant-design/icons-vue'
import type {FormInstance} from "ant-design-vue";
import {filePathTransform} from "@/utils";

const userStore = useUserStore();
const {user_name, avatar} = userStore.userInfo;
const formRef = ref<FormInstance>();

interface FormState{
  user_name:string;
  avatar?: string | File;
  password: string;
  confirmPassword: string;
}

const formState = reactive<FormState>({
  user_name,
  avatar,
  password: '',
  confirmPassword: ''
})

const avatarChange = (file: File) => {
  formState.avatar = file;
  return false;
}

const commit = async () => {
  const res = await formRef.value?.validate();
  console.log(res)
}

const avatarUrl = computed(() => formState.avatar instanceof File ?
  URL.createObjectURL(formState.avatar)
    :
    typeof formState.avatar === 'string'
    ?
        filePathTransform(formState.avatar)
        :
        ''
)

defineExpose({commit});


</script>

<style scoped>

</style>